<!-- 学生用户中心 -->

<template>
  <div class="s-center">
    <el-form label-width="80px" :model="form">
      <el-form-item label="学号">
        <el-input v-model="form.studentNo" disabled></el-input>
      </el-form-item>
      <el-form-item label="真实姓名">
        <el-input v-model="form.realname" disabled></el-input>
      </el-form-item>
      <el-form-item label="年级">
        <el-input v-model="form.grade" disabled></el-input>
      </el-form-item>
      <el-form-item label="我的班级">
        <el-input v-model="form.classNo" disabled>
          <template #append>
            <el-button v-if="!form.classNo" type="primary" @click="handleJoinClass()">加入班级</el-button>
            <el-button v-else type="info" disabled>已加入班级</el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="手机">
        <el-input v-model="form.telephone"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="saveInfo()">保存</el-button>
      </el-form-item>
    </el-form>

    <el-dialog title="加入班级" v-model="visibleForm" width="500px">
      <el-form :model="editFormData" label-position="right" label-width="80px">
        <el-form-item label="班级" prop="classNo">
          <el-select v-model="editFormData.classNo" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="text-align:left;">
          <el-button type="primary" @click="save()" size="small">提 交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';
const { proxy } = getCurrentInstance();
const store = useStore();
const router = useRouter();

const form = ref({
  studentNo: '',
  realname: '',
  grade: '',
  classNo: '',
  telephone: '',
  email: '',
});
const visibleForm = ref(false);
const editFormData = ref({
  classNo: ''
});
const options = ref([]);

onMounted(() => {
  let student = window.localStorage.getItem("student");
  if (student != null) {
    form.value = JSON.parse(student);
  } else {
    ElMessage({
      message: "获取本地用户信息失败，请重新登录",
      type: "error"
    });
  }
});

const handleJoinClass = async () => {
  try {
    let grade = form.value.studentNo.substring(4, 6);
    options.value = [];
    visibleForm.value = true;
    editFormData.value = { classNo: '' };

    const result = await proxy.$api.queryClass(grade);
    if (result && result.length > 0) {
      options.value = result.map(v => ({
        label: v.classNo,
        value: v.classNo
      }));
    } else {
      ElMessage({
        message: "当前年级没有可加入的班级",
        type: "warning"
      });
      visibleForm.value = false;
    }
  } catch (error) {
    ElMessage({
      message: "获取班级列表失败",
      type: "error"
    });
    visibleForm.value = false;
  }
}

// 提交
const save = async () => {
  try {
    await proxy.$api.saveStudnet(form.value.id, editFormData.value.classNo);
    
    ElMessage({
      message: "加入班级成功",
      type: "success"
    });

    form.value.classNo = editFormData.value.classNo;
    window.localStorage.setItem('student', JSON.stringify(form.value));
    visibleForm.value = false;
  } catch (error) {
    ElMessage({
      message: "加入班级失败",
      type: "error"
    });
  }
}

// 修改学生信息
const saveInfo = async () => {
  try {
    await proxy.$api.modifyStudent(form.value.id, form.value);

    ElMessage({
      message: "修改学生信息成功",
      type: "success"
    });
    window.localStorage.setItem('student', JSON.stringify(form.value));
  } catch (error) {
    ElMessage({
      message: "修改学生信息失败",
      type: "error"
    });
  }
}
</script>

<style lang="less">
.s-center {
  width: 500px;
  text-align: left;
  padding: 30px;
  background-color: #ffffff;
}
</style>
